<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tikitok</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link href="static/style.css" rel="stylesheet"/>
    <link href="static/swiper/swiper-bundle.min.css" rel="stylesheet"/>
    <script src="static/swiper/swiper-bundle.min.js"></script>
    <!--    vue3.0   -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="v in videos" @click="clicked(v.id,$event)">
                <!-- 播放按钮 -->
                <img v-show="!v.playing" class="play-btn" src="./static/image/play.png" alt="play">
                <!-- 头像 -->
                <img class="author" :src="v.author">
                <!-- 获取点赞 -->
                <div class="reward-num">
                    <img  alt="" src="./static/image/active.png">
                    <p>{{v.likenum}}</p>
                </div>

                <!-- 点赞出现的心 -->
                <div class="hearts">
                    <img v-for="h in hearts" :key="h.id" :style="{left: h.x+'px', top: h.y+'px'}" alt="" src="static/image/active.png">
                </div>

                <!-- 播放的视频 -->
                <video  :id="'v-'+v.id" :src="v.videoUrl" :poster="v.poster" x5-video-player-fullscreen="true" webkit-playsinline="true"
                       x-webkit-airplay="true" playsinline="true" x5-playsinline loop="loop"></video>
            </div>
        </div>
    </div>
    <footer>
        <ul>
            <li>首页</li>
            <li>朋友</li>
            <li><img src="static/image/add.png"></li>
            <li>消息</li>
            <li>我的</li>
        </ul>
    </footer>
</div>
<script src="static/data.js"></script>
<script>
    const app = ({
        data(){
            return {
               videos: VIDEOS,
                lastIndex: 0,
                currentIndex: 0,
                timer: null,
                clickStart: 0,
                hearts:[]
            }
        },
        mounted(){
            let _self = this;
            //初始化swiper
            var myswiper = new Swiper('.swiper-container',{
            direction: 'vertical',
                on:{
                    slideChangeTransitionEnd: function (){
                        _self.lastIndex = _self.currentIndex;
                        _self.currentIndex = this.activeIndex;
                        _self.switch();
                    }
                }
            })
        },
        methods:{
            //点击播放或暂停
            playClick(id){
                this.videos.forEach(v =>{
                    if(v.id === id){
                        if(v.playing){
                            v.playing = false;
                            document.querySelector('#v-'+id).pause();
                        }else {
                            document.querySelector('#v-' + id).play();
                            v.playing = true;
                        }
                    }
                })
            },
            switch(){
              document.querySelector('#v-'+this.lastIndex).pause();
              document.querySelector('#v-'+this.currentIndex).play();
              this.videos.forEach(v =>{
                  if(v.id === this.currentIndex){
                      v.playing = true;
                  }else if(v.id === this.lastIndex){
                      v.playing = false;
                  }
              })
            },
            clicked(id, e){
                clearTimeout(this.timer);
                this.timer = setTimeout(()=>{
                    clearTimeout(this.timer);
                    this.playClick(id);
                    this.clickStart = 0;
                },300);
                if(this.clickStart === 0){
                    this.clickStart = new Date().getTime();
                }else{
                    let end = new Date().getTime();
                    let del = end - this.clickStart;
                    if(del <= 300){
                        clearTimeout(this.timer);
                        this.likes(id, e);
                    }
                    this.clickStart = 0;
                }
            },
            likes(id, e){
                let x = e.clientX - 40;
                let y = e.clientY - 40;
                this.hearts.push({
                    x,
                    y,
                    id: new Date().getTime()
                })
                if(this.hearts.length > 5){
                    this.hearts.shift();
                }
                this.videos.forEach(v =>{
                    if(v.id === id){
                        v.likenum++;
                    }
                })
            }
        }
    });
    Vue.createApp(app).mount('#app');

</script>

</body>
</html>